<!-- 品牌制造商列表页 -->
<template>
  <div class="listAction-main">
    <Navbar :title="title" />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getListAction"
    >
      <div class="listActionItem" v-for="item in homeListAction" :key="item.id" @click="goBrandDetail(item.id)">
        <img class="listActionImg" :src="item.app_list_pic_url" alt />
        <div class="listActionInfo">
            <span>{{item.name}} | </span>
            <span>{{item.floor_price}}元起</span>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
//重点:1.使用concat()将不同页面的数据添加到同一个页面展示
import Navbar from "@/components/Navbar";
import brandApi from "@/api/brand/index";
import Vue from "vue";
import { List } from "vant";
Vue.use(List);
export default {
  name: "listAction",
  components: {
    Navbar,
  },
  data() {
    return {
      title: "品牌制造商",
      homeListAction: [],
      loading: false,
      finished: false,
      page: 1,
      total: 2,
    };
  },
  created() {
    
  },
  methods: {
    getListAction() {
      this.loading = true;
      brandApi
        .homeListAction({
          page: this.page,
        })
        .then((res) => {
          this.homeListAction = this.homeListAction.concat(res.data);
          this.total = res.total;
          this.page++;
          this.loading = false;
          if (this.page > this.total) {
            this.finished = true;
          }
        })
    },
    //品牌详情页
    goBrandDetail(id){
      this.$router.push({name:'brandDetail',params:{id}})
    }
  },
};
</script>
<style lang='scss' scoped>
.listAction-main {
  .van-list {
    .listActionItem {
      position: relative;
      height: 208px !important;
      margin-bottom: 3px;
      padding: 0;
      .listActionImg {
        height: 100%;
        width: 100%;
      }
      .listActionInfo{
          line-height: 208px;
          font-size: 17px;
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          color: $bagColor;
          text-align: center;
      }
    }
  }
}
</style>